<template>
	<div id="app">
		<div class="main">
			<h2 class="go" @click="isShowModal=true">去处</h2>
			<modal :visible="isShowModal" @update:visible="isShowModal=$event"></modal>
			<div class="content">
				<a class="img">
					<img src="../assets/images/1.jpg" >
					<div class="font">
						<p class="p1">元旦拼个假，玩转国内外</p>
						<p class="p2">——·元旦出游，国内外旅游目的地推荐·——</p>
					</div>
					</a>
				<a class="img">
					<img src="../assets/images/2.jpg" >
					<div class="font">
						<p class="p1">羊城慢慢行</p>
						<p class="p2">——·广州特色街巷一览·——</p>
					</div>
					</a>
				<a class="img">
					<img src="../assets/images/3.jpg" >
					<div class="font">
						<p class="p1">北京的秋天就这么美</p>
						<p class="p2">——·跟随郁达夫，去看故都的秋·——</p>
					</div>
					</a>
				<a class="img">
					<img src="../assets/images/4.jpg" >
					<div class="font">
						<p class="p1">拉萨周边好去处</p>
						<p class="p2">——·走出拉萨城，看更美的风光·——</p>
					</div>
					</a>
				<a class="img">
					<img src="../assets/images/5.jpg" >
					<div class="font">
						<p class="p1">庭院深深愿君知</p>
						<p class="p2">——·四大园林”之外的苏州园林赏·——</p>
					</div>
					</a>
				<a class="img">
					<img src="../assets/images/6.jpg" >
					<div class="font">
						<p class="p1">沪上老滋味</p>
						<p class="p2">——·上海十大传统小吃·——</p>
					</div>
					</a>
				<a class="img">
					<img src="../assets/images/7.jpg" >
					<div class="font">
						<p class="p1">谁说古镇只在江南</p>
						<p class="p2">——·成都周边好玩古镇·——</p>
					</div>
					</a>
				<a class="img">
					<img src="../assets/images/8.jpg" >
					<div class="font">
						<p class="p1">重庆六大夜景观赏地</p>
						<p class="p2">——·不览夜景，未到重庆·——</p>
					</div>
					</a>
			</div>
			
		</div>
	</div>
</template>

<script type="text/javascript">

</script>


<style scoped="scoped">
	.head{
		width: 100%;
		height: 100px;
		background-color: #2C3E50;
	}
	p{
		text-align: left;
	}
	.go{
		margin-bottom: 10px;
	}
	.main{
		width: 1000px;
		padding-left: 20px;
		padding-right: 20px;
		margin: 0 auto;
	}
	.content{
		width: 960px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: 20px;
	}
	.content a{
		display: block;
	}
	.img{
		width: 470px;
		position: relative;
		overflow: hidden;
		margin-bottom: 20px;
	}
	.img img{
		border-radius: 10px;
		  transition: all 1s;
	}
	.img:hover img{
		transform: scale(1.1);
		opacity: 0.7;
	}
	.main .img  p{
		margin: 0;
		padding: 0;
	}
	.main .img .p1{
	font-size: 25px;
	text-align: center;
	color: white;
	font-weight: 700px;
	}
	.main .img .p2{
	font-size: 20px;
	text-align: center;
	color: white;
	}
	.main .img .font{
		width: 400px;
		position: absolute;
		left: 10%;
		top: 30%;
	}
	.modal{
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0,0,0,.3);
	}
	.modal-content{
		width: 400px;
		height: 300px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		background-color: #fff;
	}
</style>
